.code-box {
  margin: 1em 0;
  border-radius: 10px;
  border: 1px solid var(--codebox-border);
  background-color: var(--codebox-bg);
  will-change: all;
  transition: all .3s ease-in-out;

  &:hover {
    box-shadow: 2px 2px 15px var(--codebox-hover-shadow);
  }

  .code-display {
    padding: 10px;
  }

  .code-source {
    border-radius: 0 0 10px 10px;
    border-top: 1px solid transparent;
    transition: border-color .3s ease-in-out;

    &--main {
      overflow: hidden;
      transition: height .3s ease-in-out;
      will-change: height;
      background-color: var(--page-bg-color);

      &.no-animate {
        transition: none;
      }

      & pre[class*='language-'] {
        margin: 0;
        background-color: transparent;
      }

      blockquote {
        margin: 1em 1em 0;
      }
    }

    &--footer {
      position: sticky;
      bottom: 0;
      left: 0;
      display: flex;
      flex-direction: row-reverse;
      align-items: center;
      margin: 0;
      padding: 0;
      height: 30px;
      list-style: none;
      font-size: 12px;
      color: var(--page-info-color);
      border-top: 1px solid var(--codebox-border);
      background-color: var(--codebox-footer-bg);
      backdrop-filter: blur(5px);
      box-sizing: border-box;
      cursor: pointer;

      li {
        padding: 0 10px;
        transition: color .3s ease-in-out;

        &:hover {
          color: var(--page-hold-color);
        }
      }
    }
  }
  
  .control-bar {
    width: 100%;
    height: 3px;
    background-color: transparent;
    transition: background-color .3s ease-in-out;
  }
  
  &.is-full-screen {
    display: flex;
    flex-direction: column;
    width: 100vw;
    height: 100vh;
    border-radius: 0;
    position: relative;
    
    .control-bar {
      cursor: n-resize;
      background-color: var(--codebox-border);
    }

    .code-display {
      flex: 1;
      overflow: auto;
      word-break: break-word;
      transition: height .3s ease-in-out;
    }

    .code-source {
      width: 100%;
      transition: height .3s ease-in-out;

      &--main {
        height: var(--height);
        overflow: auto;
      }
    }

    .control-bar:hover {
      background-color: var(--codebox-border);
    }
  }

}